import './assets/reset.css'
import './style/element/element-ui-reset.scss'
import './style/media/media.css'
import './router/routeGuards'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import navbar from './layout/navbar/navbar.vue'
import top from './layout/top/index.vue'
import Particles from 'particles.vue3'
import Prism from 'prismjs'
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index'

import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css'
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'

// highlightjs
import hljs from 'highlight.js';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
/* 引入 highlight.js 默认主题 */
import 'highlight.js/styles/github.css';
import '@/radioPlay/index.bundle.js'
import '@/radioPlay/index.bundle.css'
import '@/radioPlay/radioPlay'

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});


VueMarkdownEditor.use(vuepressTheme, {
  Prism,
})
VueMarkdownEditor.use(createEmojiPlugin())
VueMarkdownEditor.use(createCopyCodePlugin())
const app = createApp(App)

app.use(createPinia().use(piniaPluginPersistedstate))
app.use(router)
app.use(Particles)
app.use(VueMarkdownEditor)
app.use(VMdPreview)

// 注册 v-auth 指令
app.directive('auth', {
  mounted(el, binding) {
    // 保存元素原始的 display 值（通过计算样式获取）
    el._originalDisplay = window.getComputedStyle(el).display;
    // 根据权限值控制显示/隐藏
    el.style.display = binding.value == 1 ? el._originalDisplay : 'none';
  },
  updated(el, binding) {
    // 更新时重新判断权限
    el.style.display = binding.value == 1 ? el._originalDisplay : 'none';
  }
});

app.component('navbar', navbar)
app.component('top', top)
app.mount('#app')
